import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  DateDiff,
  DateStamp,
  FormatnumberZero,
  Mover,
  NumberDivide,
  getNowFormatDate,
} from '@/function.js';
// 视图插件
import { Button, Card, Col, DatePicker, Form, Input, Row, Select } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Fundanalysis from './Fundanalysis.js';
import Loading from '../../components/Loading/Loading';
// css OR less预编译器
// import styles from './All.less';
const SelectOption = Select.Option;

// 图片

/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */

@connect(({ first }) => ({
  first,
}))
@Form.create()
class FirstWorth extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   *  Created by xjc on 2019/5/15
   */

  state = {
    charts: {},
    dates: [],
    date1: '',
    value: '',
    motify: '',
    date2: '',
    refresh: false,
  };

  onSelectDate1(e) {
    this.setState({
      date1: getNowFormatDate(e._d),
    });
  }

  valueChange(e) {
    this.setState({
      value: e.target.value,
    });
  }

  addIt() {
    const { dispatch } = this.props;
    const that = this;
    this.setState({
      refresh: true,
    });
    dispatch({
      type: 'first/AddValue',
      payload: { netDate: this.state.date1, netValue: Number(this.state.value) },
      callback: () => {
        this.dataSourceChange();
      },
    });
  }

  onSelectDate2(value) {
    this.setState({
      date2: value,
    });
  }

  // alterIt(){
  //   this.dataSourceChange();
  // }
  delIt() {
    const { dispatch } = this.props;
    const that = this;
    this.setState({
      refresh: true,
    });
    dispatch({
      type: 'first/DelValue',
      payload: { netDate: this.state.date2 },
      callback: () => {
        this.dataSourceChange();
      },
    });
  }

  /**
   *  Describe:视图
   *  Created by xjc on 2019/5/15
   */

  render() {
    const { charts } = this.state;
    const { dates, refresh } = this.state;
    const selectList = [];
    if (dates) {
      for (let i = 0; i < dates.length; i++) {
        const item = dates[i];
        selectList.push(
          <SelectOption value={item.split(' ')[0]}>{item.split(' ')[0]}</SelectOption>
        );
      }
    }
    return (
      <PageHeaderWrapper>
        <Card>
          <Col span={24} style={{ marginBottom: 15 }}>
            选择日期：{' '}
            <DatePicker
              // showTime
              placeholder="请选择"
              format="YYYY-MM-DD"
              style={{ width: 200, marginRight: 25 }}
              onChange={this.onSelectDate1.bind(this)}
            />
            净值：
            <Input style={{ width: 200 }} onChange={this.valueChange.bind(this)} />
            <Button onClick={this.addIt.bind(this)} style={{ marginLeft: 25 }} type="primary">
              添加
            </Button>
          </Col>
          <Col span={24}>
            选择日期：{' '}
            <Select
              style={{ width: 200 }}
              onSelect={this.onSelectDate2.bind(this)}
              placeholder="请选择日期"
            >
              {selectList}
            </Select>
            {/* 修改值： <Input style={{width: 200, margin:4, }} onChange={this.modifyChange.bind(this)}/> */}
            {/* <Button onClick={this.alterIt.bind(this)} style={{ marginLeft:25}} type="primary">修改</Button> */}
            <Button onClick={this.delIt.bind(this)} style={{ marginLeft: 25 }} type="primary">
              删除
            </Button>
          </Col>
          {charts.list ? (
            <div
              style={{
                textAlign: 'center',
                marginLeft: '-1%',
                fontWeight: '600',
                fontSize: '1rem',
              }}
            >
              {charts.name}&nbsp;&nbsp;{charts.list[charts.list.length - 1].date}
              {/* 涨幅：{(((charts.list[charts.list.length-1].fundNetValue-charts.list[charts.list.length-2].fundNetValue)/charts.list[charts.list.length-2].fundNetValue)*100).toFixed(2)+'%'} */}
              {/*  &nbsp;&nbsp;spy涨幅：{(((charts.list[charts.list.length-1].spyNetValue-charts.list[charts.list.length-2].spyNetValue)/charts.list[charts.list.length-2].spyNetValue)*100).toFixed(2)+'%' */}
              }
            </div>
          ) : null}
          <br />
          <br />
          {refresh ? <Loading /> : <Fundanalysis charts={charts} />}
        </Card>
      </PageHeaderWrapper>
    );
  }

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'first/GetDates',
      callback: res => {
        that.setState({ dates: res.list });
      },
    });
    dispatch({
      type: 'first/GetCurve',
      callback: res => {
        that.setState({ charts: res, refresh: false });
      },
    });
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default FirstWorth;
